<template>
  <div>
    <div id="echart" style="height: 800px"></div>
    <div>
      <el-button @click="godome">国内疫情地图</el-button>
      <el-button @click="gofore">国外疫情数据</el-button>
    </div>
    <div class="word">
      <p style="font-style: normal">积极防护，保护自己，戴口罩，勤洗手</p>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      timer: null,
    };
  },

  computed: {
    ...mapState("dataList", ["dataList"]),
  },
  created() {
    this.findData();
  },

  methods: {
    ...mapActions("dataList", ["page_query"]),
    gofore() {
      this.$router.push({
        path: "/map/forepie",
      });
    },
    godome() {
      this.$router.push({
        path: "/map/index",
      });
    },
    findData() {
      this.page_query({
        page: 1,
        pageSize: 10,
      }).then(() => {
        this.initEchart();
      });
    },
    initEchart() {
      echarts.init(document.getElementById("echart")).dispose();
      //初始化图标
      var myChart = echarts.init(document.getElementById("echart"));

      // 指定图表的配置项和数据
      var option = {
        legend: {
          type: 'scroll',
        orient: 'vertical',
        top:20,
        right: 10,
        data: ['香港','台湾','上海','辽宁','北京','河北','广东','四川','陕西','福建','内蒙古','浙江','湖北','天津','云南','黑龙江','山东','河南','山西','湖南','安徽','江苏','广西','新疆','江西','重庆','甘肃','海南','吉林','贵州','宁夏','澳门','青海','西藏']
    },
        backgroundColor: "#10aeb5",
        title: {
          text: "国内各地区疫情统计汇总",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%) <br/>",
        },
        
        series: [
          {
            name: "累计确诊人数",
            type: "pie",
            radius: "70%",
            center: ["60%", "60%"],

            data: [
              { value: 9049, name: "香港" },
              { value: 817, name: "台湾" },
              { value: 1538, name: "上海" },
              { value: 373, name: "辽宁" },
              { value: 994, name: "北京" },
              { value: 412, name: "河北" },
              { value: 2060, name: "广东" },
              { value: 857, name: "四川" },
              { value: 519, name: "陕西" },
              { value: 518, name: "福建" },
              { value: 366, name: "内蒙古" },
              { value: 1306, name: "浙江" },
              { value: 68149, name: "湖北" },
              { value: 316, name: "天津" },
              { value: 230, name: "云南" },
              { value: 970, name: "黑龙江" },
              { value: 863, name: "山东" },
              { value: 1300, name: "河南" },
              { value: 225, name: "山西" },
              { value: 1021, name: "湖南" },
              { value: 993, name: "安徽" },
              { value: 685, name: "江苏" },
              { value: 264, name: "广西" },
              { value: 980, name: "新疆" },
              { value: 935, name: "江西" },
              { value: 590, name: "重庆" },
              { value: 182, name: "甘肃" },
              { value: 171, name: "海南" },
              { value: 157, name: "吉林" },
              { value: 147, name: "贵州" },
              { value: 75, name: "宁夏" },
              { value: 46, name: "澳门" },
              { value: 18, name: "青海" },
              { value: 1, name: "西藏" },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            label: {
              color: "rgba(255, 255, 255, 0.3)",
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)",
              },
              smooth: 0.2,
              length: 10,
              length2: 20,
            },
            // itemStyle: {
            //     color: '#c23531',
            //     shadowBlur: 200,
            //     shadowColor: 'rgba(0, 0, 0, 0.5)'
            // },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
          {
            type: "pie",
            radius: ["18%", "32%"],
            center: ["25%", "25%"],
            label: {
              formatter: " {b|{b}：}{c}  {per|{d}%}  ",
              backgroundColor: "#eee",
              borderColor: "#aaa",
              borderWidth: 1,
              borderRadius: 4,
              // shadowBlur:3,
              // shadowOffsetX: 2,
              // shadowOffsetY: 2,
              // shadowColor: '#999',
              // padding: [0, 7],
              rich: {
                a: {
                  color: "#999",
                  lineHeight: 22,
                  align: "center",
                },
                // abg: {
                //     backgroundColor: '#333',
                //     width: '100%',
                //     align: 'right',
                //     height: 22,
                //     borderRadius: [4, 4, 0, 0]
                // },
                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33,
                },
                per: {
                  color: "#eee",
                  backgroundColor: "#334455",
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },
            data: [
              { value: 4795, name: "死亡" },
              { value: 91114, name: "治愈" },
              { value: 97221, name: "确诊" },
              { value: 0, name: "疑似" },
            ],
          },
          {
            name: "访问来源",
            type: "pie",
            selectedMode: "single",
            radius: [0, "15%"],
            center: ["25%", "25%"],

            label: {
              position: "inner",
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1, name: "新增死亡" },
              { value: 98, name: "新增治愈" },
              { value: 90, name: "新增确诊" },
              { value: 0, name: "新增疑似" },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
div {
  position: relative;
}
div div:nth-child(2) {
  margin-top: 50px;
  left: 50%;
  margin-left: -300px;
}
div div .el-button {
  width: 300px;
}
div div .el-button:hover {
  background-color: #00bec7;
  color: white;
}
div.word {
  position: absolute;
  top: 700px;
  left: 10px;
  font-weight: bold;
  font-size: 30px;
  font-family: "新宋体", "楷体";
  color: bisque;
}
</style>



